{% load static %}
<style>

    .logo {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        background-color: ivory;
    }

    .navbar {
        background-color: #333;
        color: white;
        list-style: none;
        text-align: center;
        padding: 25px 15px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        height: 65px;

    }

    .navbar li {
        /* display: inline; */
        padding-right: 10px;

    }

    .navbar a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
    }

    /* 下拉菜单样式 */
    .dropdown {
        position: absolute;
        display: inline-block;
    }

    /* 下拉按钮样式 */
    .dropbtn {
        background-color: #333; /* 导航项背景色 */
        color: white;
        font-size: 18px;
        border: none;
        cursor: pointer;
    }

    /* 下拉内容样式（默认隐藏）*/
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        z-index: 3;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    /* 下拉内容链接样式 */
    .dropdown-content a {
        padding: 15px;
        color: black;
        text-decoration: none;
        display: block;
        position: relative; /* 将定位方式改为相对定位 */
    }

    /* 鼠标悬停时下拉内容链接样式 */
    .dropdown-content a:hover {
        background-color: #ddd;
    }

    /* 当鼠标悬停在下拉按钮上时显示下拉内容 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 右对齐最后一个二级菜单 */
    .navbar li:last-child .dropdown-content {
        right: 0;
    }

    /* 确保最后一个二级菜单不超出页面 */
    .navbar li:last-child .dropdown-content {
        left: auto;
    }


</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 天气组件 -->
{#<div a='{"t":"responsive","lang":"zh","sl_lpl":1,"ids":["wl387"],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}' id="ww_d041cd6bac0e2" loc='id'#}
{#     v='1.3'>#}
{#    <a href="https://weatherwidget.org/" id="ww_d041cd6bac0e2_u" target="_blank">Weather widget for website</a></div>#}
{#<script async src="https://app2.weatherwidget.org/js/?id=ww_d041cd6bac0e2"></script>#}


<!-- head -->
<div class="head">
{#    <!-- logo -->#}
{#    <div class="logo">#}
{#        <img alt="" src="{% static 'icon/logo.png' %}">#}
{#    </div>#}

    <ul class="navbar">

        <li class="dropdown">
            <a class="dropbtn" href="{% url 'index' %}">首页</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#services">考试信息</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#">校园实拍</a>
            <div class="dropdown-content">
                <a href="{% url 'album:index' %}">汽院</a>
                <a href="#">湖医</a>
                <a href="#">汉江师范</a>
                <a href="#">湖工职</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#services">周边饮食</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#services">住店信息</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#services">证件换底工具</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#about">关于我们</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
        <li class="dropdown">
            <a class="dropbtn" href="#contact">联系方式</a>
            <div class="dropdown-content">
                <a href="#">选项1</a>
                <a href="#">选项2</a>
                <a href="#">选项3</a>
            </div>
        </li>
    </ul>
</div>

